<template>
  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    style="width: 100%"
    :action="action"
    :multiple="ui.multiple"
    :on-preview="ui.onPreview"
    :on-remove="ui.onRemove"
    :before-remove="ui.beforeRemove"
    :before-upload="ui.beforeUpload"
    :limit="ui.limit"
    :list-type="ui.listType"
    :show-file-list="ui.showFileList"
    :disabled="ui.disabled"
    :auto-upload="ui.autoUpload"
    :accept="ui.accept"
    :headers="ui.headers"
    :http-request="httpRequest"
    :drag="ui.drag"
    :onSuccess="updateValue"
  >
    <template v-if="ui.drag">
      <component
        :is="useRenderIcon(toRaw('ant-design:cloud-upload-outlined'), style)"
      />
      <div class="el-upload__text">
        {{ ui.text || "拖拽或者点击上传" }}
      </div></template
    >
    <template v-else-if="ui.listType === 'picture-card'">
      <component
        :is="useRenderIcon(toRaw('ant-design:plus-outlined'), { width: 40 })"
    /></template>
    <el-button v-else type="primary">{{ ui.text || "upload" }}</el-button>
    <template #tip v-if="ui.tip">
      <div :class="[ui.tipClass ?? '', 'el - upload__tip']">
        {{ ui.tip }}
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup name="lc-sf-upload">
import { useRenderIcon } from "../../icon/src/hooks";
import { Http } from "@/core/api/http.service";
import {
  UploadFile,
  UploadFiles,
  UploadProgressEvent,
  UploadRequestOptions,
  UploadUserFile
} from "element-plus";
import { computed, inject, ref, toRaw } from "vue";
import { UploadUI } from "../interface";
import { NzSafeAny, TItemOption } from "../type";
import { AxiosProgressEvent } from "axios";
import { UploadAjaxError } from "element-plus/es/components/upload/src/ajax";
import { SFService } from "../sf.service";
const style = {
  width: 40,
  style: {
    display: "inline"
  }
};
const props = defineProps<TItemOption<UploadUI>>();
const fileList = ref<UploadUserFile[]>([]);
const sf = inject<SFService>("sf-service");
fileList.value = (sf.getVaule(props.keyPath) || []).map(
  (r: { name: any; id: any }) => {
    return {
      status: "success",
      name: r.name || "",
      uid: r.id,
      response: {
        id: r.id
      }
    };
  }
);
const ui = props.service.getUI<UploadUI>();
const action = computed(() => {
  return props.service.getUI<string>("action", "/file/upload");
});
const httpRequest = async (options: UploadRequestOptions) => {
  const { file, action, onProgress } = options;
  return new Promise((res, rejt) => {
    Http.of()
      .formData(file, action, (progress: AxiosProgressEvent) => {
        const progressEvt = progress as unknown as UploadProgressEvent;
        progressEvt.percent =
          progress.total > 0 ? (progress.loaded / progress.total) * 100 : 0;

        onProgress(progressEvt);
      })
      .then(r => {
        if (r) {
          res(r);
        } else {
          rejt(
            new UploadAjaxError("上传失败了请稍后再试", 200, "post", action)
          );
        }
      })
      .catch(r => rejt(r));
  });
};
const updateValue = (
  response: NzSafeAny,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  if (ui.change) {
    ui.change(response, uploadFile, uploadFiles);
  }
  const val = fileList.value.map(r => r.response);
  sf.setVaule(props.keyPath, toRaw(val));
};
</script>

<style></style>
../../icon/src/hooks ../types
